<template>
<div class="header">
  <div class="h-left">
    <span class="iconfont">&#xe604</span>

  </div>
  <div class="h-center">
     <span>{{this.address}}</span>
  </div>
  <div class="h-right">
    <span class="iconfont">&#xe605</span>
  </div>
</div>
</template>

<script>
  import {mapState} from 'vuex'
    export default {
        name: "Header",
        computed:{
          ...mapState(['address'])
        }
    }
</script>

<style  lang="stylus" scoped>
.header
  background-image linear-gradient(135deg, #FFD000 0%, #FFBD00 100%)
  height .5rem
  display flex
  text-align center
  .h-left
     flex 1
  .h-center
     flex 10
     text-align center
  .h-right
     flex 1
</style>
